/* ============================================================
   28-awareness.css
   Security-Awareness (Hornetsecurity): persoenliche Kachel,
   Abteilungsvergleich, Schild-Badge mit Popover in der Actionbar
   und die Import-/Zuordnungskarten der Seite "Security-Training".
   Selbst-enthaltene Klassen (.aw-*) - kollidiert nicht mit dem
   bestehenden Card-System.
   Bundle-Reihenfolge: nach 24-components.css, analog 27-cleverhelp.css.
   ============================================================ */

:root {
    --aw-accent: #009ee0;
    --aw-gut: #00a042;
    --aw-mittel: #e08b00;
    --aw-niedrig: #e50000;
    --aw-ink: #2b3448;
    --aw-muted: #6b7688;
    --aw-line: #eceff3;
    --aw-surface: #ffffff;
    --aw-surface-2: #f6f8fa;
    --aw-radius: 12px;
    --aw-radius-sm: 9px;
}

/* ---- KPI-Kacheln ------------------------------------------
   Eigene Klassen statt .dash-kpi*: jene liegen in
   StatsDashboardPage.razor.css und sind als scoped CSS nur
   innerhalb dieser einen Komponente wirksam. Optik bewusst
   identisch, damit der Statistikbereich einheitlich bleibt.
   ---------------------------------------------------------- */
.aw-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
}

.aw-kpi {
    border: 1px solid #f3f3f3;
    border-radius: var(--aw-radius);
    padding: 16px 18px;
    background: rgba(0, 158, 224, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .aw-kpi:hover {
        box-shadow: 0 6px 18px rgba(28, 48, 115, 0.10);
        transform: translateY(-1px);
    }

.aw-kpi-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8c9097;
}

.aw-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: rgb(28, 48, 115);
}

.aw-kpi-sub {
    font-size: 12px;
    color: #8c9097;
}

/* ---- Persoenliche Kachel --------------------------------- */
.aw-kachel {
    background: var(--aw-surface);
    /*border: 1px solid var(--aw-line);*/
    /*border-left: 3px solid var(--aw-accent);*/
    border-radius: var(--aw-radius);
    padding: 14px 16px;
    font-family: Calibri;
    color: var(--aw-ink);
    width: 100%;
    /* Ohne Deckel zieht sich die Kachel in einer breiten Karte auseinander und der
       Fortschrittsbalken wird zu einem ueberbreiten Streifen. */
    /*max-width: 520px;*/
    box-sizing: border-box;
}

/*    .aw-kachel.aw-gut {
        border-left-color: var(--aw-gut);
    }

    .aw-kachel.aw-mittel {
        border-left-color: var(--aw-mittel);
    }

    .aw-kachel.aw-niedrig {
        border-left-color: var(--aw-niedrig);
    }*/

    .aw-kachel.aw-kompakt {
        border: none;
        border-left: none;
        padding: 4px 0 0;
    }

.aw-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.aw-titel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .95rem;
}

    .aw-titel i {
        color: var(--aw-accent);
    }

.aw-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 160, 66, .10);
    color: var(--aw-gut);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.aw-zahl {
    font-size: .875rem;
    color: var(--aw-muted);
    margin-bottom: 8px;
}

    .aw-zahl strong {
        font-size: 1.25rem;
        color: var(--aw-ink);
    }

/* ---- Fortschrittsbalken ---------------------------------- */
.aw-balken {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--aw-surface-2);
    overflow: hidden;
}

.aw-fuellung {
    height: 100%;
    border-radius: 999px;
    background: var(--aw-accent);
    transition: width .4s ease;
}

.aw-kachel.aw-gut .aw-fuellung {
    background: var(--aw-gut);
}

.aw-kachel.aw-mittel .aw-fuellung {
    background: var(--aw-mittel);
}

.aw-kachel.aw-niedrig .aw-fuellung {
    background: var(--aw-niedrig);
}

/* In der Abteilungsliste sitzt die Farbe direkt an der Fuellung. */
.aw-fuellung.aw-gut {
    background: var(--aw-gut);
}

.aw-fuellung.aw-mittel {
    background: var(--aw-mittel);
}

.aw-fuellung.aw-niedrig {
    background: var(--aw-niedrig);
}

.aw-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.aw-offen {
    font-size: .8125rem;
    color: var(--aw-muted);
}

.card-btn.aw-button {
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
}

/* ---- Fertig-Zustand -------------------------------------- */
.aw-fertig {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aw-haken i {
    font-size: 1.5rem;
    color: var(--aw-gut);
}

.aw-fertig-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.aw-fertig-sub {
    font-size: .8125rem;
    color: var(--aw-muted);
}

/* ---- Leerzustaende und Hinweise -------------------------- */
.aw-kachel.aw-leer {
    border-left-color: var(--aw-line);
}

.aw-leer-text {
    font-size: .875rem;
    color: var(--aw-muted);
    line-height: 1.5;
    padding: 4px 0;
}

.aw-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--aw-line);
    font-size: .75rem;
    color: var(--aw-muted);
    line-height: 1.45;
}

.aw-stand {
    margin-top: 10px;
    font-size: .75rem;
    color: var(--aw-muted);
}

.aw-standinfo {
    align-self: center;
    font-size: .8125rem;
    color: var(--aw-muted);
    white-space: nowrap;
    margin-right:15px;
}

.aw-fehler {
    margin: 10px 0;
    font-size: .8125rem;
    color: var(--aw-niedrig);
}

.aw-info {
    margin: 10px 0;
    font-size: .8125rem;
    color: var(--aw-gut);
}

/* ---- Abteilungsvergleich ---------------------------------
   Optik am Balkendiagramm "Zeit pro Kunde" im Statistik-
   Dashboard orientiert: kraeftige Balken mit Wert, nicht
   haarduenne Linien ueber die volle Kartenbreite.
   ---------------------------------------------------------- */
.aw-abt {
    font-family: Calibri;
    color: var(--aw-ink);
    width: 100%;
    max-width: 920px;
    box-sizing: border-box;
    padding: 14px 16px;
}

.aw-zeile {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 52px 150px;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--aw-line);
}

    .aw-zeile:last-of-type {
        border-bottom: none;
    }

.aw-name {
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-wert {
    font-size: .875rem;
    font-weight: 700;
    text-align: right;
}

.aw-meta {
    font-size: .75rem;
    color: var(--aw-muted);
    text-align: right;
    white-space: nowrap;
}

/* Balken in der Abteilungsliste duerfen kraeftiger sein als der in der Kachel. */
.aw-abt .aw-balken {
    height: 18px;
    border-radius: 6px;
    background: #f1f3f6;
}

.aw-abt .aw-fuellung {
    border-radius: 6px;
}

/* ---- Schild-Badge in der Actionbar ----------------------- */
.aw-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.aw-icon {
    position: relative;
}

/* Statuspunkt am Schild – gleiche Optik wie der Stempel-Punkt daneben. */
.aw-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

    .aw-dot.aw-dot-gut {
        background: var(--aw-gut);
    }

    .aw-dot.aw-dot-mittel {
        background: var(--aw-mittel);
    }

    .aw-dot.aw-dot-niedrig {
        background: var(--aw-niedrig);
    }

.aw-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: transparent;
}

.aw-dropdown {
    position: absolute;
    top: 3.1rem;
    right: 0;
    z-index: 201;
    width: 290px;
    background: var(--aw-surface);
    border: 1px solid #ececec;
    border-radius: var(--aw-radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
    padding: 14px;
    font-family: Calibri;
    cursor: default;
}

    /* Automatisch geoeffnet: kurz hereinschieben, damit die Aenderung auffaellt. */
    .aw-dropdown.aw-auto {
        animation: aw-pop .32s cubic-bezier(.22, 1, .36, 1);
    }

@keyframes aw-pop {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aw-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}

.aw-close {
    cursor: pointer;
    color: #a5a7a8;
    font-size: .9rem;
}

    .aw-close:hover {
        color: var(--aw-accent);
    }

.aw-pagelink {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--aw-line);
    font-size: .8125rem;
    color: #2f6bd8;
    text-decoration: none;
    cursor: pointer;
}

    .aw-pagelink:hover {
        text-decoration: underline;
    }

.aw-dropdown-foot {
    margin-top: 8px;
    font-size: .6875rem;
    color: var(--aw-muted);
}

/* ---- Schmale Viewports ---------------------------------- */
@media (max-width: 992px) {
    .aw-zeile {
        grid-template-columns: 1fr 70px;
        grid-template-areas:
            "name wert"
            "balken balken"
            "meta meta";
        gap: 4px 10px;
    }

    .aw-name {
        grid-area: name;
    }

    .aw-wert {
        grid-area: wert;
    }

    .aw-balken {
        grid-area: balken;
    }

    .aw-meta {
        grid-area: meta;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .aw-dropdown {
        width: calc(100vw - 32px);
        right: -8px;
    }

    .aw-fuss {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Hinweis auf den Ablageort (nur fuer Verwalter sichtbar) ---- */
.aw-pfadhinweis {
    display: inline-block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--aw-muted);
}

    .aw-pfadhinweis code {
        background: var(--aw-surface-2);
        border-radius: 4px;
        padding: 1px 5px;
        word-break: break-all;
    }